<template>
  <div>
    <t-dialog
        v-model:visible="visible"
        class="ruleDialog"
        width="600"
        :header="dialogTitle"
        :onClose="onClose"
    >
      <t-form
          ref="ruleForm"
          :data="ruleData"
          :label-align="'top'"
          :rules="AHEAD_RULES"
          :labelWidth="78"
          @reset="ruleReset"
          @submit="ruleSubmit">
<!--        <t-form-item label="机构" name="agencyId">-->
<!--          <t-cascader-->
<!--              :options="casOptions"-->
<!--              v-model="ruleData.agencyId"-->
<!--              :keys="{-->
<!--                value: 'agencyId',-->
<!--                label: 'agencyName',-->
<!--                children: 'children'-->
<!--              }"  />-->
<!--        </t-form-item>-->
        <t-form-item label="角色名称" name="roleName">
          <t-input v-model="ruleData.roleName" placeholder="请输入角色名称"></t-input>
        </t-form-item>
        <t-form-item label="输入角色说明" name="remark">
          <t-textarea v-model="ruleData.remark" placeholder="请输入角色说明" clearable />
        </t-form-item>
<!--        <t-form-item label="状态" name="status">-->
<!--          <t-switch v-model="ruleData.status" size="medium"></t-switch>-->
<!--        </t-form-item>-->
        <t-form-item class="handleRuleBox">
          <t-space size="small">
            <t-button theme="default" variant="base" type="reset" @click="handleCancel">取消</t-button>
            <t-button class="hoverBlue" theme="primary" type="submit">保存</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </t-dialog>
  </div>
</template>

<script setup>
import {reactive, ref, watch} from 'vue'
import {MessagePlugin} from "tdesign-vue-next";
import {
  agencySelectList,
  addRole
} from '@/api/permissionSet/roleManagement.js'
import cache from '@/utils/cache.js'

const emit = defineEmits()
const props = defineProps({
  dialogVisible: Boolean,
  closeDialog: Function,
  dialogTitle: String,
  refreshTable: Function
})
const visible = ref(false);

const casOptions = ref([]) // cascader 数据
watch(() => props.dialogVisible, (newVal, oldVal) => {
  if(newVal.toString() === 'true') {
    visible.value = props.dialogVisible
    // 获取机构数据
    agencySelectList().then(res => {
      if(res.code === 0) {
        casOptions.value = res.data
      }
    })
  } else {
    visible.value = false
  }
})
const AHEAD_RULES = {
  agencyId: [ { required: true, message: '请选择机构名称' ,type: 'error', trigger: 'change'}],
  roleName: [ { required: true, message: '请输入角色名称' ,type: 'error', trigger: 'blur'}],
  passWord: [ { required: true, message: '请输入用户密码' ,type: 'error', trigger: 'blur'}],
}
const ruleData = reactive({
  agencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
  roleName: '',
  menuIdList: [],
  remark: '',
});
const ruleSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    addRole(ruleData).then(res => {
      MessagePlugin.success('新增成功!');
      emit('closeDialog', false)
      emit('refreshTable')
    })
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};
const ruleReset = () => {}
const ruleForm = ref()
const onClose = () => {
  ruleForm.value.reset()
  emit('closeDialog', false)
}
const handleCancel = () => {
  ruleForm.value.reset()
  emit('closeDialog', false)
}
</script>

<style lang="scss" scoped>
:deep(.ruleDialog .t-dialog__wrap .t-dialog__position .t-dialog) {
  padding: 22px 22px 0 22px;
  border-radius: 6px;
  .t-dialog__footer {
    display: none !important;
  }
  .t-dialog__body {
    padding-bottom: 0;
    .t-form__item {
      margin-bottom: 16px;
    }
    .t-input {
      height: 28px;
    }
  }
  .t-input__help {
    color: red;
    font-size: 12px;
  }
  .t-form__label {
    padding-right: 10px !important;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }
  .t-radio__label {
    font-size: 12px;
    font-weight: 400;
    color: rgba(92, 91, 91, 1);
  }
}
.handleRuleBox {
  padding-top: 15px;
  :deep(.t-form__label) {
    font-size: 14px;
    font-weight: 400;
    color: rgba(227, 60, 100, 0.9);

  }
  :deep(.t-form__controls) {
    text-align: right;
  }
  :deep(.t-form__controls-content) {
    display: inline-block;
    position: absolute;
    right: 0;
  }
  .t-button--theme-default {
    background-color: white;
    border: none;
    width: 60px;
    height: 28px;
  }
  .t-button--theme-primary {
    width: 60px;
    height: 28px;
    opacity: 1;
    border-radius: 3px;
    background: rgba(30, 117, 254, 1);
  }
}
</style>
